﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>表单 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">

<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#form" class="nav-link font-weight-bold"><span>表单(Form)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#introduction-to-forms-and-controls" class="nav-link"><span>表格和控件介绍</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#inline-form" class="nav-link"><span>内联表格</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#alternatives-to-hidden-labels" class="nav-link"><span>隐藏标签的替代方法</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#related-form-control-and-layout-components" class="nav-link"><span>相关的表单控制和布局组件</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#form-helper-components" class="nav-link"><span>表单辅助组件</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#form-text-helper" class="nav-link"><span>表单文本帮助</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#feedback-helpers" class="nav-link"><span>反馈辅助</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#datalist-helper" class="nav-link"><span>数据列表帮助</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#validation" class="nav-link"><span>验证方式</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#validation-mechanisms" class="nav-link"><span>验证机制</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form" class="nav-link"><span>&lt;b-form&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-text" class="nav-link"><span>&lt;b-form-text&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-invalid-feedback" class="nav-link"><span>&lt;b-form-invalid-feedback&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-valid-feedback" class="nav-link"><span>&lt;b-form-valid-feedback&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-datalist" class="nav-link"><span>&lt;b-form-datalist&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">表单</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">表单(Form)</h1>
<p class="bd-lead">BootstrapVue 表单组件和辅助组件，可以选择支持内联表单样式和验证状态。 将它们与其他 BootstrapVue 表单控件组件配对，可实现具有一致外观的轻松自定义，响应式布局。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>





<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#introduction-to-forms-and-controls" class=""><span data-v-811345e6="">Introduction to forms and controls</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#inline-form" class=""><span data-v-811345e6="">Inline form</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#alternatives-to-hidden-labels" class=""><span data-v-811345e6="">Alternatives to hidden labels</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#related-form-control-and-layout-components" class=""><span data-v-811345e6="">Related form control and layout components</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#form-helper-components" class=""><span data-v-811345e6="">Form helper components</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#form-text-helper" class=""><span data-v-811345e6="">Form text helper</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#feedback-helpers" class=""><span data-v-811345e6="">Feedback helpers</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#datalist-helper" class=""><span data-v-811345e6="">Datalist helper</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#validation" class=""><span data-v-811345e6="">Validation</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#validation-mechanisms" class=""><span data-v-811345e6="">Validation mechanisms</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form" class=""><span data-v-811345e6="">&lt;b-form&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-text" class=""><span data-v-811345e6="">&lt;b-form-text&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-invalid-feedback" class=""><span data-v-811345e6="">&lt;b-form-invalid-feedback&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-valid-feedback" class=""><span data-v-811345e6="">&lt;b-form-valid-feedback&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-datalist" class=""><span data-v-811345e6="">&lt;b-form-datalist&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<h2 id="introduction-to-forms-and-controls" class="bv-no-focus-ring"><span class="bd-content-title">表格和控件介绍<a class="anchorjs-link" href="#introduction-to-forms-and-controls" aria-labelledby="introduction-to-forms-and-controls"></a></span></h2>
<p>确保在所有输入上使用适当的 <code translate="no" class="notranslate text-nowrap">type</code>【类型】（例如，电子邮件用于 <code translate="no" class="notranslate text-nowrap">email</code>【电子邮件】地址或 <code translate="no" class="notranslate text-nowrap">number</code>【数字】用于数字信息），以利用更新的输入控件，例如电子邮件验证，数字选择等。</p>
<p>这是一个演示 BootstrapVue 表单样式的简单示例。继续阅读有关受支持的组件，表单布局等的文档。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form notranslate">
<div>
<form class="">
<div id="input-group-1" role="group" class="form-group">
<label id="input-group-1__BV_label_" for="input-1" class="d-block">Email address:</label>
<div class="bv-no-focus-ring">
<input id="input-1" type="email" placeholder="Enter email" required="required" aria-required="true" class="form-control" aria-describedby="input-group-1__BV_description_">
<small tabindex="-1" id="input-group-1__BV_description_" class="form-text text-muted">We'll never share your email with anyone else.</small></div>
</div>
<div id="input-group-2" role="group" class="form-group">
<label id="input-group-2__BV_label_" for="input-2" class="d-block">Your Name:</label>
<div class="bv-no-focus-ring">
<input id="input-2" type="text" placeholder="Enter name" required="required" aria-required="true" class="form-control">
</div>
</div>
<div id="input-group-3" role="group" class="form-group">
<label id="input-group-3__BV_label_" for="input-3" class="d-block">Food:</label>
<div class="bv-no-focus-ring">
<select id="input-3" required="required" aria-required="true" class="custom-select">
<option value="">Select One</option>
<option value="Carrots">Carrots</option>
<option value="Beans">Beans</option>
<option value="Tomatoes">Tomatoes</option>
<option value="Corn">Corn</option>
</select>
</div>
</div>
<fieldset id="input-group-4" class="form-group">

<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div id="checkboxes-4" role="group" tabindex="-1" class="bv-no-focus-ring">
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="checkboxes-4" autocomplete="off" class="custom-control-input" value="me" id="__BVID__2911">
<label class="custom-control-label" for="__BVID__2911">Check me out</label>
</div>
<div class="custom-control custom-control-inline custom-checkbox">
<input type="checkbox" name="checkboxes-4" autocomplete="off" class="custom-control-input" value="that" id="__BVID__2912">
<label class="custom-control-label" for="__BVID__2912">Check that out</label>
</div>
</div>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-danger">Reset</button>
</form>
<div class="card mt-3">
<div class="card-header">
<div>Form Data Result</div>
</div>
<div class="card-body">
<figure class="highlight"><pre class="m-0">{
  "email": "",
  "name": "",
  "food": null,
  "checked": []
}</pre></figure>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form</span> @<span class="hljs-attr">submit</span>=<span class="hljs-string">"onSubmit"</span> @<span class="hljs-attr">reset</span>=<span class="hljs-string">"onReset"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"show"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"input-group-1"</span>
        <span class="hljs-attr">label</span>=<span class="hljs-string">"Email address:"</span>
        <span class="hljs-attr">label-for</span>=<span class="hljs-string">"input-1"</span>
        <span class="hljs-attr">description</span>=<span class="hljs-string">"We'll never share your email with anyone else."</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>
          <span class="hljs-attr">id</span>=<span class="hljs-string">"input-1"</span>
          <span class="hljs-attr">v-model</span>=<span class="hljs-string">"form.email"</span>
          <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span>
          <span class="hljs-attr">required</span>
          <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter email"</span>
        &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-group-2"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Your Name:"</span> <span class="hljs-attr">label-for</span>=<span class="hljs-string">"input-2"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span>
          <span class="hljs-attr">id</span>=<span class="hljs-string">"input-2"</span>
          <span class="hljs-attr">v-model</span>=<span class="hljs-string">"form.name"</span>
          <span class="hljs-attr">required</span>
          <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter name"</span>
        &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-group-3"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Food:"</span> <span class="hljs-attr">label-for</span>=<span class="hljs-string">"input-3"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
          <span class="hljs-attr">id</span>=<span class="hljs-string">"input-3"</span>
          <span class="hljs-attr">v-model</span>=<span class="hljs-string">"form.food"</span>
          <span class="hljs-attr">:options</span>=<span class="hljs-string">"foods"</span>
          <span class="hljs-attr">required</span>
        &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-group-4"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox-group</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"form.checked"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"checkboxes-4"</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"me"</span>&gt;</span>Check me out<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
          <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"that"</span>&gt;</span>Check that out<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox-group</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"reset"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span>&gt;</span>Reset<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span> <span class="hljs-attr">header</span>=<span class="hljs-string">"Form Data Result"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-0"</span>&gt;</span>{{ form }}<span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">form</span>: {
          <span class="hljs-attr">email</span>: <span class="hljs-string">''</span>,
          <span class="hljs-attr">name</span>: <span class="hljs-string">''</span>,
          <span class="hljs-attr">food</span>: <span class="hljs-literal">null</span>,
          <span class="hljs-attr">checked</span>: []
        },
        <span class="hljs-attr">foods</span>: [{ <span class="hljs-attr">text</span>: <span class="hljs-string">'Select One'</span>, <span class="hljs-attr">value</span>: <span class="hljs-literal">null</span> }, <span class="hljs-string">'Carrots'</span>, <span class="hljs-string">'Beans'</span>, <span class="hljs-string">'Tomatoes'</span>, <span class="hljs-string">'Corn'</span>],
        <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      onSubmit(evt) {
        evt.preventDefault()
        alert(<span class="hljs-built_in">JSON</span>.stringify(<span class="hljs-keyword">this</span>.form))
      },
      onReset(evt) {
        evt.preventDefault()
        <span class="hljs-comment">// Reset our form values</span>
        <span class="hljs-keyword">this</span>.form.email = <span class="hljs-string">''</span>
        <span class="hljs-keyword">this</span>.form.name = <span class="hljs-string">''</span>
        <span class="hljs-keyword">this</span>.form.food = <span class="hljs-literal">null</span>
        <span class="hljs-keyword">this</span>.form.checked = []
        <span class="hljs-comment">// Trick to reset/clear native browser form validation state</span>
        <span class="hljs-keyword">this</span>.show = <span class="hljs-literal">false</span>
        <span class="hljs-keyword">this</span>.$nextTick(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
          <span class="hljs-keyword">this</span>.show = <span class="hljs-literal">true</span>
        })
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="inline-form" class="bv-no-focus-ring"><span class="bd-content-title">内联表格<a class="anchorjs-link" href="#inline-form" aria-labelledby="inline-form"></a></span></h2>
<p>使用 <code translate="no" class="notranslate text-nowrap">&lt;b-form&gt;</code> 上的 <code translate="no" class="notranslate text-nowrap">inline</code>（内联）属性在单个水平行上显示一系列标签，表单控件和按钮。 内联表单中的表单控件与其默认状态略有不同。</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">display: flex</code> 控件，折叠任何 HTML 空格，并允许您使用 spacespace 和 flexbox 实用程序提供对齐控件。</li>
<li>控件和输入组接收 <code translate="no" class="notranslate text-nowrap">width: auto</code> 以覆盖 Bootstrap 默认宽度：100％。</li>
<li>控件 <strong>仅在宽度至少为576像素的视口中内嵌显示</strong> ，以解决移动设备上的视口狭窄的问题。</li>
</ul>
<p>您可能需要使用 <a href="../../../bootstrap-vue/docs/reference/spacing-classes" class="font-weight-bold">spacing utilities</a>（间距实用程序）手动解决单个表单控件的宽度和对齐问题（如下所示）。最后，请确保始终在每个表单控件中包含一个 <code translate="no" class="notranslate text-nowrap">&lt;label&gt;</code> ，即使您需要将其隐藏于 <code translate="no" class="notranslate text-nowrap">.sr-only</code> 类的非屏幕阅读器访问者之外。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-inline notranslate">
<div>
<form class="form-inline">
<label for="inline-form-input-name" class="sr-only">Name</label>
<input id="inline-form-input-name" type="text" placeholder="Jane Doe" class="mb-2 mr-sm-2 mb-sm-0 form-control">
<label for="inline-form-input-username" class="sr-only">Username</label>
<div role="group" class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input id="inline-form-input-username" type="text" placeholder="Username" class="form-control">
</div>
<div class="mb-2 mr-sm-2 mb-sm-0 custom-control custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__2916">
<label class="custom-control-label" for="__BVID__2916">Remember me</label>
</div>
<button type="button" class="btn btn-primary">Save</button>
</form>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form</span> <span class="hljs-attr">inline</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sr-only"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"inline-form-input-name"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-input</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"inline-form-input-name"</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2 mr-sm-2 mb-sm-0"</span>
      <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Jane Doe"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-input</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sr-only"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"inline-form-input-username"</span>&gt;</span>Username<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-input-group</span> <span class="hljs-attr">prepend</span>=<span class="hljs-string">"@"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2 mr-sm-2 mb-sm-0"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"inline-form-input-username"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Username"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-input</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-input-group</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2 mr-sm-2 mb-sm-0"</span>&gt;</span>Remember me<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Save<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-form</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>还支持自定义表单控件和选择。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-inline-custom notranslate">
<div>
<form class="form-inline">
<label for="inline-form-custom-select-pref" class="mr-sm-2">Preference</label>
<select id="inline-form-custom-select-pref" class="mb-2 mr-sm-2 mb-sm-0 custom-select">
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="mb-2 mr-sm-2 mb-sm-0 custom-control custom-checkbox">
<input type="checkbox" autocomplete="off" class="custom-control-input" value="true" id="__BVID__2919">
<label class="custom-control-label" for="__BVID__2919">Remember my preference</label>
</div>
<button type="button" class="btn btn-primary">Save</button>
</form>
</div>
</div>
<figure class="highlight">
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form</span> <span class="hljs-attr">inline</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mr-sm-2"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"inline-form-custom-select-pref"</span>&gt;</span>Preference<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2 mr-sm-2 mb-sm-0"</span>
      <span class="hljs-attr">:value</span>=<span class="hljs-string">"null"</span>
      <span class="hljs-attr">:options</span>=<span class="hljs-string">"{ '1': 'One', '2': 'Two', '3': 'Three' }"</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"inline-form-custom-select-pref"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:first</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"null"</span>&gt;</span>Choose...<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-checkbox</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-2 mr-sm-2 mb-sm-0"</span>&gt;</span>Remember my preference<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-checkbox</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Save<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-form</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p><strong>注意：</strong> <em>由于布局冲突，<code translate="no" class="notranslate text-nowrap">inline</code>（内联）表单不支持 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code></em></p>
<h3 id="alternatives-to-hidden-labels" class="bv-no-focus-ring"><span class="bd-content-title">隐藏标签的替代方法<a class="anchorjs-link" href="#alternatives-to-hidden-labels" aria-labelledby="alternatives-to-hidden-labels"></a></span></h3>
<p>如果您没有为每个 input（输入）都包含标签，那么诸如屏幕阅读器之类的辅助技术将对您的表单造成麻烦。对于这些内联表单，您可以使用 <code translate="no" class="notranslate text-nowrap">.sr-only</code> 类隐藏标签。 还有其他为辅助技术提供标签的替代方法，例如 <code translate="no" class="notranslate text-nowrap">aria-label</code> ，<code translate="no" class="notranslate text-nowrap">aria-labelledby</code> 或 <code translate="no" class="notranslate text-nowrap">title</code> 属性。如果不存在任何一种，辅助技术可能会诉诸使用 <code translate="no" class="notranslate text-nowrap">placeholder</code> （占位符）属性（如果存在），但是请注意，不建议使用 <code translate="no" class="notranslate text-nowrap">placeholder</code>（占位符）代替其他标记方法。</p>
<h2 id="related-form-control-and-layout-components" class="bv-no-focus-ring"><span class="bd-content-title">相关的表单控制和布局组件<a class="anchorjs-link" href="#related-form-control-and-layout-components" aria-labelledby="related-form-control-and-layout-components"></a></span></h2>
<p>另请参阅：</p>
<ul>
<li><a href="../../../bootstrap-vue/docs/components/form-input" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-input&gt;</code></a> 文字和类似文字的输入</li>
<li><a href="../../../bootstrap-vue/docs/components/form-textarea" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code></a> 文字区域输入</li>
<li><a href="../../../bootstrap-vue/docs/components/form-select" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-select&gt;</code></a> 选择输入</li>
<li><a href="../../../bootstrap-vue/docs/components/form-radio" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-radio&gt;</code></a> 音频输入</li>
<li><a href="../../../bootstrap-vue/docs/components/form-checkbox" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code></a> 复选框输入</li>
<li><a href="../../../bootstrap-vue/docs/components/form-file" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-file&gt;</code></a> 文件输入</li>
<li><a href="../../../bootstrap-vue/docs/components/button" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-button&gt;</code></a> 按钮</li>
<li><a href="../../../bootstrap-vue/docs/components/form-group" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code></a> 表单输入包装器以生成支持标签，帮助文本和反馈的表单组</li>
<li><a href="../../../bootstrap-vue/docs/components/input-group" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-input-group&gt;</code></a> 带有附件的表单输入</li>
<li><a href="../../../bootstrap-vue/docs/components/layout" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-row&gt;</code></a> 创建具有更窄边距的网格行和列（可通过 <a href="../../../bootstrap-vue/docs/components/layout" class="font-weight-bold">Layout and grid components</a>【布局和网格组件】获得）</li>
</ul>
<h2 id="form-helper-components" class="bv-no-focus-ring"><span class="bd-content-title">表单辅助组件<a class="anchorjs-link" href="#form-helper-components" aria-labelledby="form-helper-components"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">Form</code> 插件提供了以下帮助器组件：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">&lt;b-form-text&gt;</code> 输入的帮助文本块</li>
<li><code translate="no" class="notranslate text-nowrap">&lt;b-form-invalid-feedback&gt;</code> 输入 <code translate="no" class="notranslate text-nowrap">invalid</code>（无效）状态的无效反馈文本块</li>
<li><code translate="no" class="notranslate text-nowrap">&lt;b-form-valid-feedback&gt;</code> 输入 <code translate="no" class="notranslate text-nowrap">valid</code>（有效）状态的有效反馈文本块</li>
<li><code translate="no" class="notranslate text-nowrap">&lt;b-form-datalist&gt;</code> 轻松创建用于 <code translate="no" class="notranslate text-nowrap">&lt;b-form-input&gt;</code> 或纯 <code translate="no" class="notranslate text-nowrap">&lt;input&gt;</code> 的 <code translate="no" class="notranslate text-nowrap">&lt;datalist&gt;</code></li>
</ul>
<h3 id="form-text-helper" class="bv-no-focus-ring"><span class="bd-content-title">表单文本帮助<a class="anchorjs-link" href="#form-text-helper" aria-labelledby="form-text-helper"></a></span></h3>
<p>在具有 <code translate="no" class="notranslate text-nowrap">&lt;b-form-text&gt;</code> 帮助器组件的输入下方显示帮助文本块。文本以柔和的颜色显示，并且字体大小稍小。</p>
<p><strong>提示：</strong> 应该使用 <code translate="no" class="notranslate text-nowrap">aria-describedby</code> 属性将帮助文本与与其相关的表单控件明确关联。 这将确保诸如屏幕阅读器之类的辅助技术将在用户聚焦或进入控件时宣布此帮助文本。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-help-text notranslate">
<div>
<form class="">
<label for="text-password">Password</label>
<input id="text-password" type="password" class="form-control" aria-describedby="password-help-block">
<small id="password-help-block" class="form-text text-muted"> Your password must be 8-20 characters long, contain letters and numbers, and must not
      contain spaces, special characters, or emoji. </small>
</form>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form</span> @<span class="hljs-attr">submit.stop.prevent</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text-password"</span>&gt;</span>Password<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text-password"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"password-help-block"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-input</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-text</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"password-help-block"</span>&gt;</span>
      Your password must be 8-20 characters long, contain letters and numbers, and must not
      contain spaces, special characters, or emoji.
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-text</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">b-form</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="feedback-helpers" class="bv-no-focus-ring"><span class="bd-content-title">反馈辅助<a class="anchorjs-link" href="#feedback-helpers" aria-labelledby="feedback-helpers"></a></span></h3>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-valid-feedback&gt;</code> 和 <code translate="no" class="notranslate text-nowrap">&lt;b-form-invalid-feedback&gt;</code> 帮助器组件将反馈（基于输入状态）显示为彩色文本块。 它们依赖于放置在输入（同级）之后，并将根据输入的浏览器本机验证状态显示。 若要强制显示，请将 <code translate="no" class="notranslate text-nowrap">force-show</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> ，或将控件 <code translate="no" class="notranslate text-nowrap">state</code>（状态）绑定到反馈帮助器的 <code translate="no" class="notranslate text-nowrap">state</code>（状态）属性，，或在父元素（例如，表单）上设置 <code translate="no" class="notranslate text-nowrap">was-validated</code> 类。 有关其他详细信息，请参见下面的 <strong>Validation</strong>（验证方式）部分。</p>
<p>使用可选的 Boolean 属性 <code translate="no" class="notranslate text-nowrap">tooltip</code>（工具提示）将显示从块更改为静态工具提示样式。反馈通常将显示在表单控件下方。 启用此模式后，重要的是父容器必须具有 <code translate="no" class="notranslate text-nowrap">position: relative:</code> css样式（或 <code translate="no" class="notranslate text-nowrap">position-relative</code> 类）。请注意，由于工具提示样式的位置是静态的，因此可能会使其他输入，标签等模糊不清。</p>
<p><strong>注意</strong> 某些表单控件，例如 <a href="../../../bootstrap-vue/docs/components/form-radio#contextual-states" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-radio&gt;</code></a> ，<a href="../../../bootstrap-vue/docs/components/form-checkbox#contextual-states" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code></a> ，和 <a href="../../../bootstrap-vue/docs/components/form-file" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-file&gt;</code></a> 具有包装元素，这些元素将阻止自动显示反馈文本（因为反馈组件为 而不是表单控件输入的直接同级）。使用反馈组件的 <code translate="no" class="notranslate text-nowrap">state</code>【状态】属性（绑定到表单控件的状态）或 <code translate="no" class="notranslate text-nowrap">force-show</code>【强制显示】属性来显示反馈。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-feedback-example notranslate">
<div>
<form class="">
<label for="feedback-user">User ID</label>
<input id="feedback-user" type="text" aria-invalid="true" class="form-control is-invalid">
<div class="invalid-feedback d-block"> Your user ID must be 5-12 characters long. </div>
<div class="valid-feedback"> Looks Good. </div>
</form>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form</span>  @<span class="hljs-attr">submit.stop.prevent</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"feedback-user"</span>&gt;</span>User ID<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-input</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"userId"</span> <span class="hljs-attr">:state</span>=<span class="hljs-string">"validation"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"feedback-user"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-input</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-invalid-feedback</span> <span class="hljs-attr">:state</span>=<span class="hljs-string">"validation"</span>&gt;</span>
        Your user ID must be 5-12 characters long.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-invalid-feedback</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-valid-feedback</span> <span class="hljs-attr">:state</span>=<span class="hljs-string">"validation"</span>&gt;</span>
        Looks Good.
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-valid-feedback</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">b-form</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">userId</span>: <span class="hljs-string">''</span>
      }
    },
    <span class="hljs-attr">computed</span>: {
      validation() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.userId.length &gt; <span class="hljs-number">4</span> &amp;&amp; <span class="hljs-keyword">this</span>.userId.length &lt; <span class="hljs-number">13</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h3 id="datalist-helper" class="bv-no-focus-ring"><span class="bd-content-title">数据列表帮助<a class="anchorjs-link" href="#datalist-helper" aria-labelledby="datalist-helper"></a></span></h3>
<p>对于支持 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">&lt;datalist&gt;</code></a> 元素的浏览器，<code translate="no" class="notranslate text-nowrap">&lt;b-form-datalist&gt;</code> 帮助器组件将允许您通过传递给 <code translate="no" class="notranslate text-nowrap">options</code> 属性的数组快速创建 <code translate="no" class="notranslate text-nowrap">&lt;datalist&gt;</code> 和 <code translate="no" class="notranslate text-nowrap">&lt;option&gt;</code> 子元素</p>
<p>您也可以在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-datalist&gt;</code> 中手动提供 <code translate="no" class="notranslate text-nowrap">&lt;option&gt;</code> 元素。它们将显示在 <code translate="no" class="notranslate text-nowrap">options</code> 属性生成的所有 <code translate="no" class="notranslate text-nowrap">&lt;option&gt;</code> 元素下方。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-datalist-example notranslate">
<label for="input-with-list">Input with datalist</label>
<input id="input-with-list" type="text" list="input-list" class="form-control">
<datalist id="input-list">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Grape">Grape</option>
<option value="Kiwi">Kiwi</option>
<option value="Orange">Orange</option>
</datalist>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-with-list"</span>&gt;</span>Input with datalist<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">list</span>=<span class="hljs-string">"input-list"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-with-list"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-datalist</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-list"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"options"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-datalist</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
  data() {
    <span class="hljs-keyword">return</span> {
      <span class="hljs-attr">options</span>: [<span class="hljs-string">'Apple'</span>, <span class="hljs-string">'Banana'</span>, <span class="hljs-string">'Grape'</span>, <span class="hljs-string">'Kiwi'</span>, <span class="hljs-string">'Orange'</span>]
    }
  }
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<p>也可以通过 <code translate="no" class="notranslate text-nowrap">&lt;b-datalist&gt;</code> 的较短别名来使用 <code translate="no" class="notranslate text-nowrap">&lt;b-form-datalist&gt;</code> 。</p>
<p>另请参阅：</p>
<ul>
<li><a href="../../../bootstrap-vue/docs/components/form-input#datalist-support" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-input&gt; datalist</code></a> 用于数据列表使用。</li>
<li><a href="../../../bootstrap-vue/docs/components/form-select#options-property" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-select&gt;</code> <code translate="no" class="notranslate text-nowrap">options</code> prop</a> 有关与 <code translate="no" class="notranslate text-nowrap">options</code>【选项】相关联的格式和辅助道具的详细信息的文档。</li>
</ul>
<h2 id="validation" class="bv-no-focus-ring"><span class="bd-content-title">验证方式<a class="anchorjs-link" href="#validation" aria-labelledby="validation"></a></span></h2>
<p>通过在 <code translate="no" class="notranslate text-nowrap">&lt;b-form&gt;</code> 上将 <code translate="no" class="notranslate text-nowrap">novalidate</code> 属性设置为 true 来禁用浏览器本地 HTML5 验证。</p>
<p>将 <code translate="no" class="notranslate text-nowrap">&lt;b-form&gt;</code> 上的验证道具设置为 <code translate="no" class="notranslate text-nowrap">true</code> ，以将Bootstrap v4 <code translate="no" class="notranslate text-nowrap">.was-validated</code> 类添加到窗体中以触发 <code translate="no" class="notranslate text-nowrap">validated</code>【验证】状态</p>
<p>所有的表单控件都支持 <code translate="no" class="notranslate text-nowrap">state</code>【状态】属性，该属性可以用于将表单控件设置为以下三种上下文状态之一：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">false</code> （表示无效状态）非常适合存在阻塞或必填字段的情况。用户必须正确填写此字段才能提交表单。</li>
<li><code translate="no" class="notranslate text-nowrap">true</code> （表示有效状态）非常适合在整个表单中都进行逐字段验证并希望鼓励用户遍历其余字段的情况。</li>
<li><code translate="no" class="notranslate text-nowrap">null</code> 不显示验证状态（无效或无效）</li>
</ul>
<p>有关新的 Bootstrap v4 验证状态的详细信息，请参阅 <a href="https://getbootstrap.com/docs/4.4/components/forms/#validation" target="_blank" rel="noopener">Bootstrap v4 表单验证文档</a> 。</p>
<h3 id="validation-mechanisms" class="bv-no-focus-ring"><span class="bd-content-title">验证机制<a class="anchorjs-link" href="#validation-mechanisms" aria-labelledby="validation-mechanisms"></a></span></h3>
<p>在 BootstrapVue 中使用基于 3<sup>rd</sup>【第三方】Vue的验证库：</p>
<ul>
<li>BootstrapVue <a href="../../../bootstrap-vue/docs/reference/validation" class="font-weight-bold">表单验证参考部分</a></li>
</ul>
<p>其他资源：</p>
<ul>
<li><a href="https://getbootstrap.com/docs/4.4/components/forms/#validation" target="_blank" rel="noopener">Bootstrap v4: 表单验证文档</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_forms_using_JavaScript" target="_blank" rel="noopener">MDN: 学习表单验证-使用JavaScript API</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation" target="_blank" rel="noopener">MDN: HTML5约束验证</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState" target="_blank" rel="noopener">MDN: 有效性状态API</a></li>
</ul>
<!-- Component reference added automatically from component package.json --> 

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/form#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>

<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form" class="anchorjs-link" aria-labelledby="comp-ref-b-form" target="_self"></a></span></h3>
 <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能组件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form/form.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">

<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form&gt;</code> 属性 </a></li>
 
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form&gt;</code> 事件 </a></li>

</ul>

<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2771">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="id" class="" id="__BVID__2771__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>

<tr role="row" data-pk="inline" class="" id="__BVID__2771__row_inline">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">inline</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，表单将处于内联模式，在单个水平行上显示标签，表单控件和按钮</td>
</tr>

<tr role="row" data-pk="novalidate" class="" id="__BVID__2771__row_novalidate">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">novalidate</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将禁用表单中控件上的浏览器本机HTML5验证</td>
</tr>

<tr role="row" data-pk="validated" class="" id="__BVID__2771__row_validated">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">validated</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，在表单上添加Bootstrap类“was-validated”，触发本机浏览器验证状态</td>
</tr>

</tbody>

</table>
</div>
 </article>
 
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form-events" class="anchorjs-link" aria-labelledby="comp-ref-b-form-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2785">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="submit" class="" id="__BVID__2785__row_submit">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">submit</code> </td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机提交事件。</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">提交表单时发出</td>
</tr>

</tbody>

</table>
</div>
</article>


<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-text" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-text&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form-text" class="anchorjs-link" aria-labelledby="comp-ref-b-form-text" target="_self"></a></span></h3>
 <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能组件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form/form-text.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">

<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-text-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-text&gt;</code> 属性 </a></li>
   
</ul>

<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-text-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form-text-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-text-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2800">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="id" class="" id="__BVID__2800__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>

<tr role="row" data-pk="tag" class="" id="__BVID__2800__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'small'</code></td>
<td aria-colindex="4" role="cell" class="">指定要渲染的HTML标签，而不是默认标签</td>
</tr>

<tr role="row" data-pk="text-variant" class="" id="__BVID__2800__row_text-variant">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">text-variant</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'muted'</code></td>
<td aria-colindex="4" role="cell" class="">将 Bootstrap 主题颜色变量之一应用于文本</td>
</tr>

<tr role="row" data-pk="inline" class="" id="__BVID__2800__row_inline">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">inline</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将帮助文本渲染为内联元素而不是块元素</td>
</tr>

</tbody>

</table>
</div>
 </article>

<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-invalid-feedback" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-invalid-feedback&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form-invalid-feedback" class="anchorjs-link" aria-labelledby="comp-ref-b-form-invalid-feedback" target="_self"></a></span></h3>
 <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能组件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form/form-invalid-feedback.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">

<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-invalid-feedback-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-invalid-feedback&gt;</code> 属性 </a></li>
   
</ul>

<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-invalid-feedback-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form-invalid-feedback-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-invalid-feedback-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2819">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="id" class="" id="__BVID__2819__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>

<tr role="row" data-pk="tag" class="" id="__BVID__2819__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要渲染的HTML标签，而不是默认标签</td>
</tr>

<tr role="row" data-pk="tooltip" class="" id="__BVID__2819__row_tooltip">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tooltip</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">以基本的工具提示样式渲染反馈文本</td>
</tr>

<tr role="row" data-pk="force-show" class="" id="__BVID__2819__row_force-show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">force-show</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">显示反馈文本，与“ state”属性的值无关</td>
</tr>

<tr role="row" data-pk="state" class="" id="__BVID__2819__row_state">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">state</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">当显式为“ false”时，强制反馈显示</td>
</tr>

<tr role="row" data-pk="aria-live" class="" id="__BVID__2819__row_aria-live">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-live</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">当渲染的元素是aria实时区域（适用于屏幕阅读器用户）时，请设置为'polite' 或 'assertive'</td>
</tr>

<tr role="row" data-pk="role" class="" id="__BVID__2819__row_role">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">role</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将 ARIA 属性“role”【角色】设置为特定值</td>
</tr>

</tbody>

</table>
</div>
 </article>

<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-valid-feedback" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-valid-feedback&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form-valid-feedback" class="anchorjs-link" aria-labelledby="comp-ref-b-form-valid-feedback" target="_self"></a></span></h3>
 <a data-v-866a22e8="" rel="noopener" target="_blank" href="https://vuejs.org/v2/guide/render-function.html#Functional-Components" class="badge badge-secondary"> 功能组件 </a></div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form/form-valid-feedback.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">

<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-valid-feedback-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-valid-feedback&gt;</code> 属性 </a></li>
   
</ul>

<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-valid-feedback-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form-valid-feedback-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-valid-feedback-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2841">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="id" class="" id="__BVID__2841__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>

<tr role="row" data-pk="tag" class="" id="__BVID__2841__row_tag">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tag</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'div'</code></td>
<td aria-colindex="4" role="cell" class="">指定要渲染的 HTML 标签，而不是默认标签</td>
</tr>

<tr role="row" data-pk="tooltip" class="" id="__BVID__2841__row_tooltip">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tooltip</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">以基本的工具提示样式渲染反馈文本</td>
</tr>

<tr role="row" data-pk="force-show" class="" id="__BVID__2841__row_force-show">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">force-show</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">显示反馈文本，与“state”属性的值无关</td>
</tr>

<tr role="row" data-pk="state" class="" id="__BVID__2841__row_state">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">state</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">当明确为“true”时，强制反馈显示</td>
</tr>

<tr role="row" data-pk="aria-live" class="" id="__BVID__2841__row_aria-live">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-live</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">当渲染的元素是aria实时区域（适用于屏幕阅读器用户）时，请设置为 'polite' 或 'assertive'</td>
</tr>

<tr role="row" data-pk="role" class="" id="__BVID__2841__row_role">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">role</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">将 ARIA 属性“role”【角色】设置为特定值</td>
</tr>

</tbody>

</table>
</div>
 </article>

<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-datalist" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-datalist&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form-datalist" class="anchorjs-link" aria-labelledby="comp-ref-b-form-datalist" target="_self"></a></span></h3>
 </div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form/form-datalist.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-datalist-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-datalist&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-datalist-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-datalist&gt;</code> 属性 </a></li>
   
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-datalist-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form-datalist-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-form-datalist-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-datalist&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-datalist&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。</p>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-datalist-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form#comp-ref-b-form-datalist-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-datalist-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__2864">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="options" class="" id="__BVID__2864__row_options">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">options</code>     </td>
<td aria-colindex="2" role="cell" class="">Array or Object</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">[]</code></td>
<td aria-colindex="4" role="cell" class="">要在组件中渲染的项目数组</td>
</tr>

<tr role="row" data-pk="value-field" class="" id="__BVID__2864__row_value-field">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value-field</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'value'</code></td>
<td aria-colindex="4" role="cell" class="">'options'【选项】数组中的字段名称，该字段名称应用于该值</td>
</tr>

<tr role="row" data-pk="text-field" class="" id="__BVID__2864__row_text-field">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">text-field</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'text'</code></td>
<td aria-colindex="4" role="cell" class="">'options'【选项】数组中应用于文本标签的字段名称</td>
</tr>

<tr role="row" data-pk="html-field" class="" id="__BVID__2864__row_html-field">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">html-field</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'html'</code></td>
<td aria-colindex="4" role="cell" class="">'options'【选项】数组中的字段名称，应该用于html标签而不是文本字段。请谨慎使用。</td>
</tr>

<tr role="row" data-pk="disabled-field" class="" id="__BVID__2864__row_disabled-field">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled-field</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'disabled'</code></td>
<td aria-colindex="4" role="cell" class="">'options'【选项】数组中应用于禁用状态的字段名称</td>
</tr>

<tr role="row" data-pk="id" class="" id="__BVID__2864__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code> <span data-v-866a22e8="" class="badge badge-info">Required</span>    </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“ id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>

</tbody>

</table>
</div>
 </article>

<article class="bd-content">
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/form#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__2881">

<thead role="rowgroup" class="thead-default">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BForm</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-text&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormText</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-invalid-feedback&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormInvalidFeedback</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-valid-feedback&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormValidFeedback</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-datalist&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormDatalist</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>

</tbody>

</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BForm } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-form'</span>, BForm)</pre></figure>
</article>

<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/form#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。 插件还包括任何组件别名。</p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__2895">

<thead role="rowgroup" class="thead-default">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">FormPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>

</tbody>

</table>
</div>

<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { FormPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(FormPlugin)</pre></figure>
</article>





















</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
